<!-- created by chengfei 2023/4/26 -->
<!-- 组件：列表设计-查询条件配置 -->
<template>
    <div>
        <rx-fit style="padding-top: 6px">
            <template #toolheader foldbtn="false" border="false">
                <div class="table-containers">
                    <div class="header-toolbar">
                        <a-form-model layout="inline" style="display: flex">
                            <a-form-item :label="i18n('isShowSearch','是否开启搜索条件')">
                                <a-switch v-model="isShowSearch" size="small" />
                            </a-form-item>
                            <template v-if="isShowSearch">
                                <a-form-item :label="i18n('showSearchStyle','搜索条件风格')">
                                    <a-radio-group placeholder="搜索条件风格" v-model="showSearchStyle">
                                        <a-radio value="NO">{{i18n('styleOption.NO','默认收起')}}</a-radio>
                                        <a-radio value="YES">{{i18n('styleOption.YES','放列表顶部')}}</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                                <a-form-item :label="i18n('showSearchLayout','搜索条件布局')">
                                    <a-radio-group placeholder="搜索条件布局" v-model="showSearchLayout">
                                        <a-radio value="YES">{{i18n('layoutOption.YES','垂直')}}</a-radio>
                                        <a-radio value="NO">{{i18n('layoutOption.NO','水平')}}</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                            </template>
                        </a-form-model>
                    </div>
                    <div class="btn-box">
                        <a-space style="margin-bottom: 10px">
                            <a-button size="small" @click="addSearchRow">{{i18n('addSearchRow','新增搜索条件配置')}}</a-button>
                            <a-button size="small" @click="removeSearchRow">{{i18n('removeSearchRow','删除搜索条件配置')}}</a-button>
                            <a-button size="small" @click="upSearchRow">{{$comi18('grid.up','向上')}}</a-button>
                            <a-button size="small" @click="downSearchRow">{{$comi18('grid.down','向下')}}</a-button>
                        </a-space>
                    </div>
                    <rx-grid
                        ref="table"
                        :data-source="fieldList"
                        :columns="columns"
                        :allow-row-select="true"
                        :multiSelect="true"
                        :showPage="false"
                        :bordered="true"
                        style="min-height: 300px"
                    >
                        <span slot="fieldName" slot-scope="{ text, record, index }">
                            <a-select
                                v-model="record.fieldName"
                                @change="changeFieldName($event, record, 'fieldLabel')"
                                :options="paramData"
                                style="width: 100%"
                            ></a-select>
                        </span>
                        <span slot="fieldLabel" slot-scope="{ text, record, index }">
                            <a-input v-model="record.fieldLabel" style="width: 100%" />
                        </span>
                        <span slot="autoFilter" slot-scope="{ text, record, index }">
                            <a-select v-model="record.autoFilter" style="width: 100%">
                                <a-select-option value="YES">{{i18n('filterOpt.YES','是')}}</a-select-option>
                                <a-select-option value="NO">{{i18n('filterOpt.NO','否')}}</a-select-option>
                            </a-select>
                        </span>
                        <span slot="defaultVal" slot-scope="{ text, record, index }">
                            <a-input v-model.trim="record.defaultVal" style="width: 100%" />
                        </span>
                        <span slot="fieldOp" slot-scope="{ text, record, index }">
                            <a-select
                                v-if="
                                    record.dataType == null ||
                                    record.dataType == 'string' ||
                                    record.dataType == 'varchar' ||
                                    record.dataType == 'clob'
                                "
                                v-model="record.fieldOp"
                                style="width: 100%"
                            >
                                <a-select-option value="EQ">{{i18n('fieldOp.EQ','等于')}}</a-select-option>
                                <a-select-option value="NEQ">{{i18n('fieldOp.NEQ','不等于')}}</a-select-option>
                                <a-select-option value="IN">{{i18n('fieldOp.IN','包含')}}</a-select-option>
                                <a-select-option value="LK">{{i18n('fieldOp.LK','模糊匹配')}}</a-select-option>
                                <a-select-option value="LEK">{{i18n('fieldOp.LEK','左模糊查询')}}</a-select-option>
                                <a-select-option value="RIK">{{i18n('fieldOp.RIK','右模糊查询')}}</a-select-option>
                            </a-select>
                            <a-select
                                v-if="['int', 'number','decimal'].includes(record.dataType) && record.fc != 'rangepicker'"
                                v-model="record.fieldOp"
                                style="width: 100%"
                            >
                                <a-select-option value="EQ">{{i18n('fieldOp.EQ','等于')}}</a-select-option>
                                <a-select-option value="NEQ">{{i18n('fieldOp.NEQ','不等于')}}</a-select-option>
                                <a-select-option value="IN">{{i18n('fieldOp.IN','包含')}}</a-select-option>
                                <a-select-option value="LT">{{i18n('fieldOp.LT','小于')}}</a-select-option>
                                <a-select-option value="LE">{{i18n('fieldOp.LE','小于等于')}}</a-select-option>
                                <a-select-option value="GT">{{i18n('fieldOp.GT','大于')}}</a-select-option>
                                <a-select-option value="GE">{{i18n('fieldOp.GE','大于等于')}}</a-select-option>
                            </a-select>
                            <a-select
                                v-if="['date','datetime'].includes(record.dataType) && record.fc != 'rangepicker'"
                                v-model="record.fieldOp"
                                style="width: 100%"
                            >
                                <a-select-option value="EQ">{{i18n('fieldOp.EQ','等于')}}</a-select-option>
                                <a-select-option value="NEQ">{{i18n('fieldOp.NEQ','不等于')}}</a-select-option>
                                <a-select-option value="LT">{{i18n('fieldOp.LT','小于')}}</a-select-option>
                                <a-select-option value="LE">{{i18n('fieldOp.LE','小于等于')}}</a-select-option>
                                <a-select-option value="GT">{{i18n('fieldOp.GT','大于')}}</a-select-option>
                                <a-select-option value="GE">{{i18n('fieldOp.GE','大于等于')}}</a-select-option>
                            </a-select>
                        </span>
                        <span slot="fc" slot-scope="{ text, record, index }">
                            <a-select v-model="record.fc" :options="fieldControls" style="width: 100%"></a-select>
                        </span>
                        <span slot="searchSetting" slot-scope="{ text, record, index }">
                            <a-button @click="showSearchConfigEditor($event, record)"
                                >{{i18n('config','配置')}}</a-button
                            >
                            <span v-if="record.isSeted" class="is-seted"
                                ><i class="iconfont iconsuccess_fill is-seted"></i>{{i18n('hasConfig','已配')}}</span
                            >
                        </span>
                    </rx-grid>
                </div>
            </template>
        </rx-fit>
    </div>
</template>

<script>
import { RxGrid, RxInputButton, Util, GridMixin, BaseForm } from "@lowcode/jpaas-common-lib"
import MiniQuery from '@/views/modules/form/core/MiniQuery'

export default {
    name: 'Edit2SearchConditionConf',
    // 引入表格新增/删除/移动行等操作
    mixins: [GridMixin, BaseForm],
    components: {
        RxGrid,
        RxInputButton,
    },
    props: {
        defaultValue: { type: Object, default: () => {} },
        fieldDataAll: { type: Array, default: () => []}
    },
    data() {
        return {
            // 表格
            // 表格：表头
            columns: [
                {
                    title: this.i18n('form.fieldName','搜索字段'),
                    dataIndex: 'fieldName',
                    scopedSlots: { customRender: 'fieldName' },
                    width: 120,
                },
                { title: this.i18n('form.fieldLabel','标签'), dataIndex: 'fieldLabel', scopedSlots: { customRender: 'fieldLabel' }, width: 120 },
                {
                    title: this.i18n('form.autoFilter','自动过滤'),
                    dataIndex: 'autoFilter',
                    scopedSlots: { customRender: 'autoFilter' },
                    width: 120,
                },
                {
                    title: this.i18n('form.fieldOp','比较符'),
                    dataIndex: 'fieldOp',
                    scopedSlots: { customRender: 'fieldOp' },
                    width: 120,
                },
                {
                    title: this.i18n('form.fc','输入控件'),
                    dataIndex: 'fc',
                    scopedSlots: { customRender: 'fc' },
                    width: 120,
                },
                {
                    title: this.i18n('form.searchSetting','搜索配置'),
                    dataIndex: 'searchSetting',
                    scopedSlots: { customRender: 'searchSetting' },
                    width: 120,
                },
            ],
            // 表格：数据
            fieldList: [],
            // 是否开启搜索条件
            isShowSearch: true,
            // 搜索条件风格 NO默认收起 YES放列表顶部
            showSearchStyle: 'NO',
            // 搜索条件布局 NO水平 YES垂直
            showSearchLayout: 'YES',
            // 输入控件
            fieldControls: [
                { label: this.i18n('fc.textbox','文本框'), value: 'textbox' },
                { label: this.i18n('fc.datepicker','日期'), value: 'datepicker' },
                // { label: '日期范围', value: 'rangepicker' },
                // { label: '月份', value: 'month' },
                // { label: '下拉框', value: 'select' },
                // { label: '树形下拉框', value: 'treeselect' },
                // { label: '自定义对话框', value: 'dialog' },
                // { label: '数字框', value: 'number' },
                // { label: '用户', value: 'user' },
                // { label: '部门', value: 'group' },
                // { label: '复选框', value: 'checkboxgroup' },
            ],
        }
    },
    computed: {
        paramData() {
            return this.fieldDataAll.map(item=>{
                return {label:item.comment,value:item.fieldName,key:item.dataType};
            })
        },
    },
    mounted() {
        const { searchList, isShowSearch, searchStyle, searchLayout } = this.defaultValue
        this.isShowSearch = isShowSearch === 'YES' || isShowSearch === undefined
        this.showSearchStyle = searchStyle || 'NO'
        this.showSearchLayout = searchLayout || 'NO'
        this.fieldList = searchList ? [...searchList] : []
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formCodegenBusiness.edit2.searchCondition",key);
        },
        // 新增行
        addSearchRow() {
            const newCol = {
                fc: 'textbox',
                type: 'query',
                fieldName: '',
                autoFilter: 'YES',
                fieldOp: 'EQ',
            }
            this.$refs.table.addRow(newCol)
        },
        // 删除行
        removeSearchRow() {
            const table = this.$refs.table
            table.removeRows()
            table.selectedRowKeys = []
            table.selectedRows = []
            this.$forceUpdate()
        },
        // 向上
        upSearchRow() {
            this.$refs.table.moveUp()
        },
        // 向下
        downSearchRow() {
            this.$refs.table.moveDown()
        },
        changeFieldName(value, record, header) {
            let flag = false
            for (let i = 0; i < this.paramData.length; i++) {
                if (this.paramData[i].value == value) {
                    record.dataType = this.paramData[i].key
                    record.dataType_name = this.getDataTypeName(record.dataType)
                    if (header) {
                        record[header] = this.paramData[i].label
                    }
                    flag = true
                    break
                }
            }
            if (!flag) {
                record.dataType = 'string'
                record.dataType_name = this.i18n('dataType.string','字符')
            }
        },
        getDataTypeName(dataType) {
            let json = {
                string: this.i18n('dataType.string','字符'),
                int: this.i18n('dataType.int','整型'),
                number: this.i18n('dataType.number','浮点型'),
                date: this.i18n('dataType.date','日期型'),
                boolean: this.i18n('dataType.boolean','布尔型'),
                currency: this.i18n('dataType.currency','货币型'),
            }
            if (json[dataType]) {
                return json[dataType]
            }
            return ''
        },

        showSearchConfigEditor(event, record, table) {
            if (!table) {
                table = this.$refs.table
            }
            var row = record //table.getSelectedRow();
            if (!row || row.fc == '-') {
                this.$message.error(this.i18n('msg.noControl','搜索控件列不能为空'))
                return false
            }
            var conf = {
                component: MiniQuery,
                title: this.i18n('msg.configTitle','搜索条件配置'),
                curVm: this,
                data: { row: row, fieldDatas: this.paramData, queryAry: table.getData(), showDefault: true },
                widthHeight: ['800px', '400px'],
            }
            Util.open(conf, function (action) {
                if (action != 'ok') {
                    return
                }
                var data = this.getData()
                row.isSeted = true
                row.searchConf=data;
                table.updateRow(row, data)
                table.$forceUpdate()
            })
        },

        collectData() {
            let result={success:true};
            const data = this.$refs.table.getData()
            // 去除空行
            var tableData = []
            data.forEach((elem) => {
                if (elem.fieldName) {
                    tableData.push(elem)
                }
            })
            const { isShowSearch, showSearchStyle, showSearchLayout } = this
            const config = {
                searchList: tableData,
                isShowSearch: isShowSearch ? 'YES' : 'NO',
                searchStyle: showSearchStyle,
                searchLayout: showSearchLayout,
            }
            result.data=config;
            return result;
        },
    },
}
</script>

<style scoped>
.is-seted {
    color: #70b90b;
    margin-left: 5px;
}
</style>
